import React, { Component,Fragment } from 'react'
import List from './list'
import './list.css'

export default class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            todoTxt:"早上八点去打马球",
            list:["晚上9点去看电影","看完电影去喝酒"]
        }
        this.delfun = this.delfun.bind(this)
        this.addHandle = this.addHandle.bind(this)
    }
    render(){
        return (<Fragment>
            <div>
                <label htmlFor="todoTxt">备忘录：</label>
                <input id="todoTxt" onChange={this.changeIpt.bind(this)} ref={(input)=>this.todoIpt = input} placeholder="please input" value={this.state.todoTxt}/>
                <button onClick={this.addHandle}>添加</button>
            </div>
            <div>
                <List 
                    data={this.state.list}
                    delFun={this.delfun}
                />
            </div>
        </Fragment>);
    }
    changeIpt(){
        this.setState({
            todoTxt:this.todoIpt.value
        })
    }
    addHandle(){
        let list = this.state.list
        if(this.state.todoTxt){
            list.push(this.state.todoTxt)
            this.setState({
                list:list,
                todoTxt:''
            })
        }
    }
    delfun(idx){
        let list = this.state.list
        list.splice(idx,1)
        this.setState({
            list:list
        })
    }
}
